<template>
    <el-dialog title="" :visible.sync="dialogVisible" width="1100px" append-to-body>
    <div slot="title">
        <img :src="url" :alt="tip" style="width: 148px; height: 24px;"/>
        <!-- <el-link type="primary" @click="toPage" style="margin-left: 4px">免费下载171TRACK应用程序</el-link> -->
    </div>
    <el-row style="border: 1px solid #e6e6e6;line-height: 36px; margin-bottom: 24px;" type="flex">
        <el-col :span="12" style="border-right: 1px solid #e6e6e6;padding-left: 12px">
            <div>{{ orderInfo.track_number }}</div>
            <div>{{ orderInfo.latest_sub_status | formatLabelByValueFuzzy(subTrackList) }}</div>
        </el-col> 
        <el-col :span="12">
            <el-row type="flex" align="middle">
                <el-image :src="require('@/assets/images/zhuan.png')" style="width: 30px; margin-right: 12px"/>
                <div style="flex: 1;">
                    <div style="border-bottom: 1px solid #e6e6e6;">{{ orderInfo.provider_country }} (<span style="color: #11A983">{{ orderInfo.provider_name }}</span>)</div>
                    <div>{{ orderInfo.receive_country }}</div>
                </div>
            </el-row>
        </el-col> 
    </el-row>
        <div style="overflow:auto; max-height: 63vh;">

                <el-timeline>
                    <el-timeline-item
                    v-for="(item, index) in tableData"
                    :key="index"
                    :timestamp="item.time_raw"
                    :type="index == 0 ? 'primary' : 'info'"
                    placement="top">
                    <div class="ellipsis-1">
                        {{item.location}} {{item.description}}
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-dialog>
</template>

<script>
import { queryordertrackInfo, getSubTrackList } from '@/api/order'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
            status: "",
        },
    },
    data() {
        return {
            total: 0,
            pageInfo: {
                page: 1,
                limit: 10,
            },
            // 查询参数
            queryParams: {
                name: undefined,
            },
            loading: true,
            download: true,
            orderInfo: {},
            tableData: [],
            subTrackList: [],
            activeTab: '',
            status: [
                { label: '全部', value: '' },
                { label: '小店铺', value: 'SmallShop' },
                { label: 'FB,TT渠道', value: 'fb' },
                { label: 'email,ggad,impact渠道', value: 'email' },
                { label: '渠道内分配', value: 'WithinTheChannel' },
                { label: '直流分配', value: 'DirectCurrent' },
                { label: 'SheCurve', value: 'SheCurve' },
            ],
            platformOptions: [
                { label: '17track', value: 0, url: 'https://res.17track.net/global-v2/imgs/logo/svg/full_owt_296x48.svg' },
                { label: '718track', value: 1, url: 'https://shopify.fan-zhou.com/storage/system/platform_1.png' },
                { label: '4PXtrack', value: 2, url: 'https://fpx-open-platform-prod.oss-cn-shenzhen.aliyuncs.com/v2/assets/logo.909832ee.svg' },
            ]
        }
    },
    computed: {
        url() { 
            return this.platformOptions.find(item => item.value === this.params.platform_track).url
        },
        tip() {
            return this.platformOptions.find(item => item.value === this.params.platform_track).label
        },
        title() {
            return `物流轨迹`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    // this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
   async mounted() {
        const params = { platform_track: this.params.platform_track }
        console.log('this.params',this.params);
        getSubTrackList(params)
            .then(res => {
                this.subTrackList = res?.data ?? []
            })
        this.getDetail()
    },
    handleQuery() {
        this.getDetail()
    },
    methods: {
        toPage() {
            window.open('https://www.17track.net/zh-cn/app', '_blank') 
        },
        getDetail() {
            
            this.loading = true
            const params = { track_number: this.params.track_number }
            queryordertrackInfo(params)
                .then(res => {
                    this.tableData = this.tableData.concat(res.data.tracking_list)
                    this.orderInfo = res.data
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style>
.form-class.el-form .el-form-item {
    width: 100%;
    margin-right: 0;
}
.form-class.el-form .el-form-item .el-input {
    width: 400px;
}
.ellipsis-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 95%;
}
</style>
